<template>

  <div>
    <!--操作栏，start-->
    <el-row type="flex" :gutter="20" class="hui-mb-1">
      <el-col :span="16">
        <el-button @click="handleCreate" icon="el-icon-plus" type="primary" size="medium">新建标签</el-button>
        <el-button @click="handleDownload" icon="el-icon-download" size="medium">导出标签</el-button>
      </el-col>
      <el-col :span="8">
        <!--标签搜索，start-->
        <el-input
          placeholder="请输入标签名称"
          v-model="search">
          <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <!--标签搜索，end-->
      </el-col>
    </el-row>
    <!--操作栏，end-->

    <!--标签列表，start-->
    <el-table :data="tags.list" stripe border>
      <el-table-column label="标签 ID" prop="tagId" width="80px"></el-table-column>
      <el-table-column label="标签名称" prop="tagName"></el-table-column>
      <el-table-column label="已打标签人数" width="110px">
        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)" type="text">{{ scope.row.tagUser }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="自动标签条件">
        <template slot-scope="scope">
          <template v-if="scope.row.tagAutoRoles.length === 0">未设置</template>
          <div v-for="item in scope.row.tagAutoRoles" :key="item.id" v-else>{{ item.label }} {{ item.value }}</div>
        </template>
      </el-table-column>
      <el-table-column label="最后操作人" width="170px">
        <template slot-scope="scope">
          <div>{{ scope.row.updateTime }}</div>
          <div>{{ scope.row.updateUser }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230px">
        <template slot-scope="scope">
          <!--删除确认，start-->
          <el-popover
            ref="popoverDelete"
            title="提示"
            placement="top-end"
            width="240"
            v-model="scope.row.visible">
            <p>确认删除这个标签么？</p>
            <div class="hui-text-right">
              <el-button @click="handleCancel(scope.row)" type="text" size="mini">取消</el-button>
              <el-button @click="handleDelete(scope.row)" type="danger" size="mini">确定</el-button>
            </div>
          </el-popover>
          <!--删除确认，end-->
          <el-button @click="handleView(scope.row)" type="success" size="mini" plain>会员</el-button>
          <el-button @click="handleEdit(scope.row)" type="primary" size="mini" plain>编辑</el-button>
          <el-button v-popover:popoverDelete type="danger" size="mini" plain>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--标签列表，end-->

    <!--分页，start-->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pages"
      :page-sizes="[50]"
      :page-size="50"
      layout="total, sizes, prev, pager, next"
      :total="tags.total"
      background
      class="hui-mt-2">
    </el-pagination>
    <!--分页，end-->
  </div>

</template>

<script>
export default {
  data () {
    return {
      tags: {
        total: 0,
        list: []
      },
      pages: 0,
      search: '',
      visible: false
    }
  },
  created () {
    this.getTags()
  },
  methods: {
    // 获取tags
    getTags () {
      let list = this.tags.list
      let total = 300
      let pages = this.pages
      let i = 0
      let tmp = [
        {
          tagId: 3,
          tagName: '标签名称3',
          tagUser: 1024,
          tagAutoRoles: [
            {
              id: 0,
              label: '累计消费次数满',
              value: '1 笔'
            },
            {
              id: 1,
              label: '累计消费金额满',
              value: '100 元'
            },
            {
              id: 2,
              label: '累计储值金额满',
              value: '1000 元'
            }
          ],
          updateTime: '2018-1-29 15:13:37',
          updateUser: '黄倬, 13262268525'
        },
        {
          tagId: 2,
          tagName: '标签名称2',
          tagUser: 2048,
          tagAutoRoles: [
            {
              id: 3,
              label: '累计领取优惠券',
              value: '10张'
            },
            {
              id: 4,
              label: '累计使用优惠券',
              value: '5张'
            }
          ],
          updateTime: '2018-1-29 15:13:37',
          updateUser: '黄倬, 13262268525'
        },
        {
          tagId: 1,
          tagName: '标签名称1',
          tagUser: 2333,
          tagAutoRoles: [],
          updateTime: '2018-1-29 15:13:37',
          updateUser: '黄倬, 13262268525'
        }
      ]
      for (i in tmp) {
        list.push(tmp[i])
      }
      this.tags.list = list
      this.pages = pages + 1
      this.tags.total = total
    },
    // 分页事件
    handleCurrentChange () {
      console.log(this.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },
    // 搜索事件
    handleSearch () {
      console.log('搜索标签:' + this.search)
    },
    // 新建标签事件
    handleCreate () {
      this.$router.push({
        path: 'detail',
        query: {
          type: 'create'
        }
      })
    },
    // 下载事件
    handleDownload () {
      console.log('下载标签')
    },
    // 查看事件
    handleView (row) {
      console.log('查看, 标签ID:' + row.tagId)
    },
    // 编辑事件
    handleEdit (row) {
      let tagId = row.tagId
      this.$router.push({
        path: 'detail',
        query: {
          type: 'edit',
          tagId: tagId
        }
      })
    },
    // 删除事件
    handleDelete (row) {
      row.visible = false
      console.log('删除, 标签ID:' + row.tagId)
    },
    // 取消事件
    handleCancel (row) {
      row.visible = false
    }
  }
}
</script>
